<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css" />
		<style type="text/css">
			body{
				background: #dff9fb;
			}
			.body {
				position: absolute;
				top: 0;
				width: 100%;
				padding: 0;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				height: 100vh;
			}

			.row {
				position: absolute;
				top: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 140px;
				width: 90%;
				

			}

			.info {
				position: relative;
				width: 30%;
				height: 100%;
				background: #FFFFFF;
				box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.1);
				display: flex;

			}

			.info1 {
				position: absolute;
				left: 0;
			}

			.info3 {
				position: absolute;
				right: 0;
			}

			.info_l {
				position: absolute;
				display: flex;
				height: 90%;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				left: 10px;
				width: 60%;
			}

			.info_r {
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				right: 10px;
				height: 90%;
				width: 30%;
			}
			.icon{
				width: 80%;
				height: 60%;
			}

			.num {
				font-weight: 400;
				font-size: 35px;
				line-height: 34px;
			}

			.num1 {
				color: #1D8FF7;
			}

			.num2 {
				color: #86DE8F;
			}

			.num3 {
				color: #F3B622;
			}

			.desp {
				font-weight: 400;
				font-size: 18px;
				line-height: 34px;
				color: #ABAFB3;
			}

			.row2 {
				position: absolute;
				width: 90%;
				top: 150px;
				height: 391px;
				box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.1);
				border: #cccccc dashed;
				margin-top: 20px;
			}

			.row3 {
				position: absolute;
				top: 600px;
				width: 90%;
				height: 600px;
				border: #000000 dashed;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.chart_l{
				position: absolute;
				left: 0;
				height: 95%;
				width: 35%;
				border: #000000 solid 1px;
			}
			.chart_r{
				position: absolute;
				right: 0;
				height: 95%;
				width: 55%;
				border: #000000 solid 1px;
				
			}
			.mypanel{
				position: absolute;
				top: 1250px;
				width: 90%;
				height: auto;
			}
		</style>
	</head>
	<body>
		{% with sum_=sum,num_=num,day_num=day_num %}
		<div class="container-fluid  body">
			<div class="row">
				<div class="info1 info ">
					<div class="info_l hidden-xs">
						<div class="num num1">
							{{num_['count(*)']}}
						</div>
						<div class="desp">
							本月总订单
						</div>
					</div>
					<div class="info_r">
						<img src="../../static/img/home/total_order.png" class="img-responsive" alt="Responsive image">
						
					</div>
				</div>
				<div class="info2 info ">
					<div class="info_l hidden-xs">
						<div class="num num2">
						{{day_num['count(*)']}}
						</div>
						<div class="desp">
							今日订单
						</div>
					</div>
					<div class="info_r">
						<img src="../../static/img/home/new_order.png" class="img-responsive" alt="Responsive image">
					</div>
				</div>
				<div class="info3 info ">
					<div class="info_l hidden-xs">
						<div class="num num3">
							￥{{sum_['sum(price)']}}
						</div>
						<div class="desp">
							本月收入
						</div>
					</div>
					<div class="info_r">
						<img src="../../static/img/home/revenue.png" class="img-responsive" alt="Responsive image">
						<!-- <img class="icon" src="../../static/img/home/revenue.png"> -->
					</div>
				</div>
			</div>

			<div class="row2">
				

			</div>

			<div class="row3">
				

			</div>
			
			<div class="panel panel-default mypanel">
			  <div class="panel-heading" style="background: #fcf8e3">近期订单</div>
			  <div class="panel-body">
			    
				<table class="table table-hover">
					<thead style=" border: 0;">
						<tr>
							<th>订单ID</th>
							
							<th>客户姓名</th>
							<th>订单项目</th>
							<th>价格</th>
							<th>配送时间</th>
							
						</tr>
					</thead>
					<tbody>
						{% for item in ord_list %}
						<tr>
							<th scope="row">{{item.ONO}}</th>
							<td>{{item.CNAME}}</td>
							<td>{{item.DNAME}}</td>
							<td>{{item.price}}</td>
							<td>{{item.DELTIME}}</td>
				
						</tr>
						{% endfor %}
						
					</tbody>
				</table>
				
				
				
				
				
			  </div>
			</div>


		</div>



		<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" charset="utf8"
			src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
		<script type="text/javascript">
		$(function () {
			$.ajax({
				url: 'ordN', //向 http://127.0.0.1:自己的端口号/xxx 发送一个请求
				async: true, //异步请求，不用管
				success: function (res) { //回调函数，请求成功后打印返回的结果
					// 数据处理
					let time = res[0].map(function (item, index, array) {
						return item.year + '-' + item.month
					})
					let ordN = res[0].map(function (item, index, array) {
						return item.ordN
					})
					let turnover = res[1].map(function (item, index, array) {
						return item.turnover
					})
					// 画图
					let c = echarts.init(document.querySelector('.row2'))
		
					/** @type EChartsOption */
					const op = {
						title: {
							text: '月总订单走势图 & 月营业额统计图',
							left: 'center',
							textStyle: {
								color: '#000000',
							},
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								crossStyle: {
									color: '#aaff7f'
								}
							}
						},
						toolbox: {
							feature: {
								dataView: { show: true, readOnly: false },
								magicType: { show: true, type: ['line', 'bar'] },
								restore: { show: true },
								saveAsImage: { show: true }
							},
							iconStyle: {
								color: '#fff',
							},
						},
						legend: {
							data: ['订单数', '营业额'],
							top: '10%',
							textStyle: {
								color: '#000000',
							},
						},
						xAxis: {
							type: 'category',
							data: time,
							axisPointer: {
								type: 'shadow'
							},
							axisLine: {
								lineStyle: {
									color: '#000000',
								},
							},
							axisTick: {
								lineStyle: {
									color: "#fff",
								},
							},
							axisLabel: {
								color: '#000000',
							},
							nameTextStyle: {
								color: '#fff',
							},
						},
						yAxis: [
							{
								type: 'value',
								name: '订单数',
								min: 0,
								max: 900,
								interval: 180,
								axisLabel: {
									formatter: '{value} 单',
									color: '#000000',
								},
								axisLine: {
									lineStyle: {
										color: 'gray',
									},
								},
								axisTick: {
									lineStyle: {
										color: "#fff",
									},
								},
								nameTextStyle: {
									color: '#000',
								},
							},
							{
								type: 'value',
								name: '营业额',
								min: 4000,
								max: 22000,
								interval: 3600,
								axisLabel: {
									formatter: '{value} 元',
									color: '#000000',
								},
								axisLine: {
									lineStyle: {
										color: 'gray',
									},
								},
								axisTick: {
									lineStyle: {
										color: "#fff",
									},
								},
								nameTextStyle: {
									color: '#000000',
								},
							}
						],
						grid: {
							containLabel: false,
							bottom: '10%',
							right: '10%',
							left: '10%',
							top: '20%',
						},
						series: [
							{
								name: '订单数',
								type: 'bar',
								tooltip: {
									valueFormatter: function (value) {
										return value + ' 单';
									}
								},
								data: ordN,
								itemStyle: {
									normal: {
										color: function (params) {
											let colorList = []
											for (let i = 0; i < ordN.length; i++)colorList.push('gray')
											return colorList[params.dataIndex]
										}
									}
								},
							},
							{
								name: '营业额',
								type: 'line',
								yAxisIndex: 1,
								tooltip: {
									valueFormatter: function (value) {
										return value + ' 元';
									}
								},
								data: turnover
							}
						]
					};
					if (op && typeof op === 'object') {
						c.setOption(op);
					}
					window.addEventListener('resize', c.resize);
				}
			})
		}
		)
		
			$(function () {
			    $.ajax({
			        url: 'dishSales', //向 http://127.0.0.1:自己的端口号/xxx 发送一个请求
			        async: true, //异步请求，不用管
			        success: function (res) { //回调函数，请求成功后打印返回的结果
			            // 数据处理
			            let name = res.map(function (item, index, array) {
			                return item.DNAME
			            })
			            let N = res.map(function (item, index, array) {
			                return item.N
			            })
			            // 画图
			            let c = echarts.init(document.querySelector('.row3'))
			            /** @type EChartsOption */
			            const op = {
			                yAxis: {
			                    type: 'category',
			                    data: name,
			                    boundaryGap: true,
			                    axisTick: {
			                        show: true,
			
			                    },
			                    axisLabel: {
			                        interval: 0,
			                        color: '#000000',
			                    },
			                    axisLine: {
			                        lineStyle: {
			                            color: '#fff',
			                        },
			                    },
			                },
			                xAxis: {
			                    type: 'value',
			                    axisLabel: {
			                        color: '#000000',
			                    },
			                    axisLine: {
			                        lineStyle: {
			                            color: '#fff',
			                        },
			                    },
			                    axisTick: {
			                        lineStyle: {
			                            color: "#fff",
			                        },
			                    },
			                },
			                series: [
			                    {
			                        data: N,
			                        type: 'bar',
			                        itemStyle: {
			                            color: 'green',
			                            shadowBlur: 200,
			                            shadowColor: 'rgba(0, 0, 0, 0)'
			                        },
			                    },
			                ],
			                title: {
			                    text: '近三月各菜品销量图',
			                    left: 'center',
			                    textStyle: {
			                        color: '#000000',
			                    },
			                },
			                tooltip: {
			                    trigger: 'axis',
			                    axisPointer: {
			                        type: 'shadow',
			                        shadowStyle: {
			                            color: 'gray',
			                            opacity: 0.5,
			                        },
			                    }
			                },
			                grid: {
			                    containLabel: false,
			                    bottom: '7%',
			                    right: '10%',
			                    left: '10%',
			                    top: '7%',
			                },
			                toolbox: {
			                    feature: {
			                        dataView: { show: true, readOnly: false },
			                        magicType: { show: true, type: ['line', 'bar'] },
			                        restore: { show: true },
			                        saveAsImage: { show: true }
			                    },
			                    iconStyle: {
			                        color: '#fff',
			                    },
			                },
			
			            }
			            if (op && typeof op === 'object') {
			                c.setOption(op);
			            }
			            window.addEventListener('resize', c.resize);
			        }
			    })
			}
			)
			
		</script>

	</body>
	{% endwith %}
</html>
